import React, { useEffect, useState } from 'react';
import { StyleSheet, TouchableOpacity } from 'react-native';
import { HStack, View, Text } from 'native-base';
import { EEventType } from '../../../../common/enum.ts';
import Empty from '../../../../component/Empty.tsx';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import { FasterImageView } from '@candlefinance/faster-image';
import EventCollection from '../eventCollection.ts';
import { useDispatch } from 'react-redux';
import { AppDispatch } from '../../../../redux/store.ts';
import { updateBtnInformation } from '../../../../redux/reducers/app.ts';

interface IHomeButtonListProps {
  serverList?: IServerBtnListRes;
}

function judgeDisplayvoiceInput(item: IServerBtnListBtnList) {
  if (item.relationType == 1 && (item.eventId === 10 || item.eventId === 18 || item.eventId === 19) && item.voiceOrderFlag) {
    return true;
  } else {
    return false;
  }
}

const HomeButtonList: React.FC<IHomeButtonListProps> = (props) => {
  const [list, setList] = useState<IServerBtnListBtnList[]>([]);
  const dispatch = useDispatch<AppDispatch>();

  useEffect(() => {
    if (props.serverList) setList(props.serverList.btnList);
  }, [props.serverList]);

  const handlePress = (item: IServerBtnListBtnList) => {
    EventCollection.onPress(item);
    dispatch(updateBtnInformation({ ...item, moduleType: undefined }));
  };

  return (
    <React.Fragment>
      <HStack flexWrap={'wrap'} justifyContent={'space-between'}>
        {list.map((item, index) => {
          return (
            <TouchableOpacity style={styles.list} key={index} onPress={() => handlePress(item)} onLongPress={() => EventCollection.onLongPress(item)} delayLongPress={500}>
              <FasterImageView style={styles.itemImage} source={{ url: item.value, transitionDuration: 0.3, resizeMode: 'cover', cachePolicy: 'discWithCacheControl', showActivityIndicator: true }} />
              {!judgeDisplayvoiceInput(item) && <Text style={styles.itemText}>{EEventType[item.eventId] || '点击进入'}</Text>}
              {judgeDisplayvoiceInput(item) && (
                <View style={[styles.itemText, { flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }]}>
                  <Text color="#f18311">长按</Text>
                  <FontAwesome name={'microphone'} size={18} color={'#f18311'} style={{ marginHorizontal: 4 }} />
                  <Text color="#f18311">下单</Text>
                </View>
              )}
            </TouchableOpacity>
          );
        })}
        {list.length === 0 && <Empty text={'暂无数据'} />}
      </HStack>
    </React.Fragment>
  );
};
const styles = StyleSheet.create({
  list: { width: '31.5%', backgroundColor: '#fff', borderRadius: 8, overflow: 'hidden', marginBottom: 8 },
  itemImage: { width: '100%', height: 130, resizeMode: 'cover' },
  itemText: { textAlign: 'center', paddingVertical: 5, borderTopColor: '#f3f3f3', borderTopWidth: 1, color: '#f18311' },
});

export default HomeButtonList;
